<template>
  <div id="selectCourse">
    <div class="choose-class-center">
      <div class="direction">
        <span class="title">方向</span>
        <div class="filterContent">
          <span :class="['filterItem', directionActive == item.id ? 'activeStyle' : '']" v-for="item in direction"
            :key="item.id" @click="handleChangeDirection(item.id)">{{ item.name }}</span>
        </div>
        <div class="filter-class fr" v-if="isDisplay" @click="handleChangeDisplay">
          收起筛选<i class="el-icon-arrow-up"></i>
        </div>
        <div class="filter-class fr" v-else @click="handleChangeDisplay">
          展开筛选<i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div class="display" v-if="isDisplay">
        <div class="direction" v-for="item in otherList" :key="item.type">
          <span class="title">{{ item?.name }}</span>
          <div class="filterContent" v-if="item?.type == 1">
            <span :class="['filterItem', classActive == v.id ? 'activeStyle' : '']" v-for="v in item?.children"
              :key="v.id" @click="handleChangeSelect(item, v.id)">{{ v.name }}</span>
          </div>
          <div class="filterContent" v-if="item?.type == 2">
            <span :class="['filterItem', firmActive == v.id ? 'activeStyle' : '']" v-for="v in item?.children"
              :key="v.id" @click="handleChangeSelect(item, v.id)">{{ v.name }}</span>
          </div>
          <div class="filterContent" v-if="item?.type == 3">
            <span :class="['filterItem', wayActive == v.id ? 'activeStyle' : '']" v-for="v in item?.children"
              :key="v.id" @click="handleChangeSelect(item, v.id)">{{ v.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="course-box">
      <div class="title">
        <span class="caption">全部课程</span>
        <span class="all">共找到<strong style="color: #000;"> {{courseList?.length || 0}} </strong>个结果</span>
      </div>
      <div class="menu">
        <span :class="[activeSpan == 1 ? 'activeSpan' : '']" @click="handleActiveSpan(1)">综合</span>
        <span :class="[activeSpan == 2 ? 'activeSpan' : '']" @click="handleActiveSpan(2)">销量榜</span>
        <span :class="[activeSpan == 3 ? 'activeSpan' : '']" @click="handleActiveSpan(3)">新课榜</span>
        <span :class="[activeSpan == 4 ? 'activeSpan' : '']" @click="handleActiveSpan(4)">
          价格
          <img src="../assets/img/down1.png" alt="" v-if="priceCount == 0 && activeSpan == 4">
          <img src="../assets/img/down2.png" alt="" v-if="priceCount != 0 && activeSpan == 4">
          <img src="../assets/img/down0.png" alt="" v-if="priceCount == 0 && activeSpan != 4">
        </span>
        <el-select v-model="timeValue" placeholder="开课时间">
          <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="wayValue" placeholder="开课方式">
          <el-option v-for="item in wayList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="course-item-box">
        <div class="course-item" v-for="item in courseList" :key="item.id">
          <span class="way">{{item.way}}</span>
          <div class="title">{{item.title}}</div>
          <div class="open-time">开课时间：{{ item.date }}</div>
          <div class="tag">
            <span v-for="v in item.tags" :key="v">{{v}}</span>
          </div>
          <div class="price"><span>￥</span>{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectCourse",
  components: {},
  data() {
    return {
      directionActive: 1,
      classActive: 1,
      firmActive: 1,
      wayActive: 1,
      activeSpan: 1,
      timeValue: 'all',
      wayValue: 'all',
      priceCount: 0,
      isDisplay: true,
      direction: [
        { id: 1, name: '全部' },
        { id: 2, name: '公共课' },
        { id: 3, name: '企业定制课' },
      ],
      otherList: [
        {
          type: 1, name: '技术分类', children: [
            { id: 1, name: '全部' },
            { id: 2, name: 'IT技术' },
            { id: 3, name: 'IT管理' },
            { id: 4, name: '软件开发' },
            { id: 5, name: '管理课程' },
            { id: 6, name: '就业班' },
            { id: 7, name: '其他' },
          ]
        },
        {
          type: 2, name: '厂商/方向', children: [
            { id: 1, name: '全部' },
            { id: 2, name: '华为' },
            { id: 3, name: '安全' },
            { id: 4, name: '虚拟化' },
            { id: 5, name: '系统与网络' },
            { id: 6, name: '自动化运维' },
            { id: 7, name: '数据库' },
            { id: 8, name: '云计算与物联网' },
          ]
        },
        {
          type: 3, name: '学习方式', children: [
            { id: 1, name: '直播' },
            { id: 2, name: '面授' },
            { id: 3, name: '直播+面授' },
          ]
        },
      ],
      timeList: [
        { value: 'all', label: '全部时间' },
        { value: 'one', label: '近一个月开课' },
        { value: 'three', label: '近三个月开课' },
        { value: 'six', label: '近六个月开课' },
      ],
      wayList: [
        { value: 'all', label: '全部方式' },
        { value: 'direct', label: '直播' },
        { value: 'face', label: '面授' },
        { value: 'directAndFace', label: '直播+面授' },
      ],
      courseList: [
        {id: 1,title: '信息系统项目管理师', date: '2024-12-28', tags: ['周末','北京'],way: '直播',price: '2457'},
        {id: 2,title: '华为数通HCIA', date: '2024-12-28', tags: ['周末','全国'],way: '面授',price: '3666'},
        {id: 3,title: 'CISSP注册信息系统', date: '2024-12-28', tags: ['周末','全国'],way: '直播',price: '5674'},
        {id: 4,title: 'PMP项目管理', date: '2024-12-28', tags: ['周末','北京'],way: '面授',price: '3666'},
        {id: 5,title: 'CISP注册信息安全专业人员', date: '2024-12-28', tags: ['周末','北京'],way: '直播',price: '3666'},
        {id: 6,title: 'Foundation认证(中文版)', date: '2024-07-20', tags: ['周末','全国'],way: '直播+面授',price: '1980/2380'},
        {id: 7,title: 'Foundation认证(英文版)', date: '2024-07-20', tags: ['周末','北京'],way: '直播+面授',price: '1980/2380'},
        {id: 8,title: 'Java全栈开发工程师', date: '2024-07-08', tags: ['脱产','北京'],way: '面授',price: '22700'},
        {id: 9,title: 'Linux云计算', date: '2024-07-08', tags: ['脱产','北京'],way: '面授',price: '22700'},
        {id: 10,title: '前端开发工程师', date: '2024-07-08', tags: ['脱产','北京'],way: '面授',price: '22700'},
      ],
    }
  },
  methods: {
    handleChangeDirection(count) {
      this.directionActive = count
    },
    handleChangeSelect(item, id) {
      if (item.type == 1) {
        this.classActive = id
      } else if (item.type == 2) {
        this.firmActive = id
      } else if (item.type == 3) {
        this.wayActive = id
      }
    },
    handleActiveSpan(count) {
      this.activeSpan = count;
      if (count == 4) {
        if (this.priceCount == 0) {
          this.priceCount = 1;
        } else {
          this.priceCount = 0;
        }
      } else {
        this.priceCount = 0;
      }
    },
    handleChangeDisplay() {
      this.isDisplay = !this.isDisplay
    },
  }
};
</script>

<style scoped lang="less">
#selectCourse {
  width: 100%;
  min-height: 200px;

  .fr {
    float: right;

  }

  .choose-class-center {
    background-color: #f5f7fa;
    padding: 20px 0;

    .direction {
      align-items: flex-start;
      display: flex;
      margin: 8px auto 0;
      min-height: 44px;
      width: 1200px;


      .title {
        color: #202226;
        display: inline-block;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        margin-right: 30px;
        width: 64px;
      }

      .filterContent {
        width: 1050px;

        .filterItem {
          color: #202226;
          cursor: pointer;
          display: inline-block;
          font-family: MicrosoftYaHei;
          font-size: 14px;
          margin-bottom: 10px;
          margin-right: 7px;
          padding: 4px 15px 5.8px;

        }

        .activeStyle {
          border-radius: 14px;
          color: #f45f16;
        }
      }

      .filter-class {
        background: #fff;
        border: 1px solid #dadde3;
        border-radius: 4px;
        color: #727884;
        cursor: pointer;
        font-size: 14px;
        height: 24px;
        line-height: 22px;
        padding-left: 8px;
        width: 80px;
      }
    }


  }

  .course-box {
    padding: 20px 0;

    .title {
      height: 24px;
      line-height: 24px;
      margin: 29px auto 0;
      width: 1200px;
      display: flex;
      justify-content: space-between;

      .caption {
        color: #202226;
        font-family: MicrosoftYaHei;
        font-size: 18px;
        font-weight: 700;
      }

      .all {
        color: #5a606c;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        padding-right: 5px;
      }
    }

    .menu {
      margin: 0 auto;
      width: 1200px;
      padding-top: 10px;

      span {
        margin-right: 15px;
        cursor: pointer;

        img {
          height: 10px;
          margin: 3px 0 0 5px;
          width: 10px;
          border: 0;
        }
      }

      span:hover {
        color: #f45f16;
      }

      .activeSpan {
        font-weight: 700;
        color: #f45f16;
      }

      :deep(.el-select) {
        width: 110px;

        .el-input__inner {
          border: none;
          outline: none;
        }
      }
    }

    .course-item-box {
      margin: 29px auto 0;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;

      .course-item {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        box-shadow: 0 0 6px #a5a6a8;
        box-sizing: border-box;
        padding: 10px;
        margin-right: 20px;
        margin-bottom: 20px;

        .way {
          font-size: 14px;
          color: #f45f16;
          box-sizing: border-box;
          padding: 2px 8px;
          border-radius: 5px;
          background-color: #d0f9f0;
          color: #37c09d;
        }

        .title {
          color: #202226;
          display: -webkit-box;
          font-family: MicrosoftYaHei;
          font-size: 14px;
          font-weight: 700;
          line-height: 22px;
          // overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }

        .open-time {
          color: #5a606c;
          font-size: 14px;
          line-height: 19px;
          margin: 10px 0;
        }

        .tag {
          span {
            background-color: #edeff2;
            border-radius: 4px;
            color: #85909b;
            font-size: 12px;
            margin-right: 5px;
            padding: 3px 6px;
          }
        }

        .price {
          margin-top: 20px;
          text-align: right;
          font-size: 18px;
          font-weight: 700;
          color: #ff7800;

          span {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.el-select-dropdown__item.selected {
  color: #f45f16;
}
</style>